<template>
  <div class="my_content">
    <!-- 标题 -->
    <c-title :title="moduleInfo.displayName"></c-title>
    <!-- x方向内容 -->
    <ul class="x_com" v-if="xList.length > 0">
      <li v-for="item in xList" :key="item.id" :info="item">
        <a>
          <v-item
            :img="item.albumInfo.cover"
            :id="item.id"
            :title="item.albumInfo.title"
            :des="item.albumInfo.salePoint"
            :countInfo="item.statCountInfo"
          ></v-item>
        </a>
      </li>
    </ul>
    <!-- y方向内容 -->
    <ul class="y_com" v-if="yList.length > 0">
      <li v-for="item in yList" :key="item.id" :id="item.id" :info="item">
        <a>
          <d-item
            :img="item.albumInfo.cover"
            :id="item.id"
            :title="item.albumInfo.title"
            :des="item.albumInfo.salePoint"
            :countInfo="item.statCountInfo"
          ></d-item>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import CTitle from "@/components/content/CTitle.vue";
import DItem from "@/components/content/DItem.vue";
import VItem from "@/components/content/VItem.vue";
export default {
  name: "MyContent",
  data() {
    return {
      xList: [],
      yList: [],
    };
  },
  components: {
    CTitle,
    DItem,
    VItem,
  },
  props: {
    infoList: {
      type: Array,
    },
    moduleInfo: {
      type: Object,
    },
  },
  //   watch:{
  //       infoList:{
  //           immediate:true,
  //           deep:true,
  //           handler(val){
  //             this.xList = val
  //             this.yList = this.xList.splice(3,3)
  //           }
  //       }
  //   },
  mounted() {
    if (this.infoList.length <= 2) {
      this.yList = this.infoList;
    } else {
      this.xList = this.infoList.splice(0, 3);
      this.yList = this.infoList.splice(0);
    }
  },
};
</script>

<style lang="scss" scoped>
.my_content {
  padding: 7px 15px;
  .x_com,
  .y_com {
    li {
      a {
        display: block;
      }
    }
  }
  .x_com {
    margin: 10px 0 24px;
    display: flex;
    justify-content: space-between;
  }
  .y_com li {
    margin-bottom: 28px;
  }
}
</style>

